<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 父组件监听子组件传递过来的参数 -->
        <soncpn @sonclick="vClick">
        </soncpn>
    </div>
</body>
<template id="soncpn">
    <div>
        <button v-for="(type, index) in types" :key="index" @click="btnClick(type)">{{type.name}}</button>
    </div>
</template>
<script src="../js/http_cdn.bootcdn.net_ajax_libs_vue_2.6.6_vue.js"></script>
<script>
    const soncpn = {
        template: "#soncpn",
        data() {
            return {
                types: [
                    {
                        id: '1',
                        name: '手机推荐'
                    },
                    {
                        id: '2',
                        name: '家用电器'
                    },
                    {
                        id: '3',
                        name: '电脑数码'
                    },
                ]
            }
        },
        methods: {
            btnClick(item) {
                console.log(item, "向父组件发送参数")
                // 向父组件传递参数
                this.$emit('sonclick', item)
            }
        },
    }

    new Vue({
        el: "#app",
        components: {
            soncpn
        },
        methods: {
            vClick(item) {
                console.log(item, `接收到了子组件传过来的参数`)
            }
        }
    })
</script>

</html>
